import {
  Form,
  Button,
  DatePicker,
  Radio,
  Select,
  Steps,
  Input,
  Row,
  Col,
  Select,
  InputNumber,
  Table,
  Card,
  Descriptions,
  Tooltip,
  Icon,
  Divider,
  message,
} from 'antd';
import React, { Component } from 'react';
import { FormComponentProps } from 'antd/es/form';
import { TableListItem } from '../data.d';
const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
import { connect } from 'dva';
import Constants from '../utils/Constants';
import {download} from '../utils/commons';
import OutbuyForm from './OutbuyForm.tsx';
const R = require('ramda');
import router from 'umi/router';

export interface FormValsType extends Partial<TableListItem> {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
}

export interface UpdateFormProps extends FormComponentProps {
  handleUpdateModalVisible: (flag?: boolean, formVals?: FormValsType) => void;
  handleModalVisible: (values: FormValsType) => void;
  updateModalVisible: boolean;
  values: Partial<TableListItem>;
}

export interface UpdateFormState {
  formVals: FormValsType;
}

const outbuyInfoForm = Form.create()(class OutbuyInfoForm extends React.Component {
  static defaultProps = {
    handleModalVisible: () => {
    },
    handleUpdateModalVisible: () => {
    },
    values: {},
  };

  constructor(props: UpdateFormProps) {
    super(props);
    this.state = {
      productflag: false, //产品列表数据
      showFreight: false,
      showPremium: false,
      productList: [],
    };
  }

  statistics = {};

  handleResetFields = () => {
    this.props.form.resetFields();
    const {dispatch, handleModalVisible, handleSearch} = this.props;
    // dispatch({
    //   type: 'foreignTraderQuery/refreshState',
    //   payload: {
    //     list: {}
    //   },
    // });
    handleModalVisible(false);
    // handleSearch();
  };


  getForm = (reportType) => {
    const {dispatch, list, index, countrycode} = this.props;

    let idNumber = null;
    let crifData = list[index];
    let identifiers = crifData.entity.identifiers;
    if (identifiers && identifiers.length > 0) {
      for (var j = 0; j < identifiers.length; j++) {
        var item = identifiers[j];
        if (item.iDType == "SUPPLIER_ID") {
          idNumber = item.iDNumber;
        }

      }
    }

    let dataSource = {};
    dataSource.reportType = reportType;
    dataSource.buyer = crifData.entity.name;
    dataSource.address = crifData.entity.addresses.length > 0 ? crifData.entity.addresses[0].address : null;
    dataSource.idtype = "SUPPLIER_ID";
    dataSource.idnumber = idNumber;
    dataSource.providername = crifData.providerName;
    dataSource.countrycode = countrycode;

    if (reportType === Constants.NUMBER_ONE) {

      dispatch({
        type: "foreignTraderQuery/saveOutbuyerInfo",
        payload: {
          ...dataSource,
          onSuccess: (data) => {
            if (!R.isNil(data) && !R.isEmpty(data)) {
              router.push('/pay/payConfirm?goodsId=' + Constants.NUMBER_SIX + '&entityid=' + data.id + '&bussinesstype=' + Constants.SERVICE.OUTBUYER_SERVICE + '&extra=' + countrycode);
            }
          }
        }
      });

    } else {
      this.outbuyForm.handleOpen(dataSource);
    }

  };


  render() {
    const {
      form: {getFieldDecorator, getFieldValue},
      list,
      index,
      price,
    } = this.props;

    let dataSource = list[index];
    let identifiers = dataSource.entity.identifiers;
    let registrationNumber = null;
    let taxcode = null;
    let vatcode = null;
    let buergelId = null;

    if (identifiers && identifiers.length > 0) {
      for (var j = 0; j < identifiers.length; j++) {
        var item = identifiers[j];
        if (item.iDType == "REGISTRATION_NUMBER") {
          registrationNumber = item;

        } else if (item.iDName == "Tax code") {
          taxcode = item;

        } else if (item.iDType == "VAT_NUMBER") {
          vatcode = item;

        } else if (item.iDType == "SUPPLIER_ID") {
          buergelId = item;
        }
      }
    }

    let addresses = dataSource.entity.addresses && dataSource.entity.addresses.length > 0 ? dataSource.entity.addresses : null;
    let contacts = dataSource.entity.contacts && dataSource.entity.contacts.length > 0 ? dataSource.entity.contacts : null;

    return (
      <div>
        <Card title="详细信息" style={{marginBottom: 24}} bordered={false}>
          <Descriptions style={{marginBottom: 24}}>
            <Descriptions.Item label="公司名称">{dataSource.entity.name}</Descriptions.Item>
            <Descriptions.Item label="地址类型">{addresses ? addresses[0].addressType : "暂无数据"}</Descriptions.Item>
            <Descriptions.Item label="详细地址">{addresses ? addresses[0].address : "暂无数据"}</Descriptions.Item>
            <Descriptions.Item
              label="国家和地区">{addresses ? addresses[0].country : "暂无数据"}({addresses[0].countryCode})</Descriptions.Item>
          </Descriptions>
          <Descriptions style={{marginBottom: 24}} title="信息组">
            <Descriptions.Item label="联系类型">{contacts ? contacts[0].type : "暂无数据"}</Descriptions.Item>
            <Descriptions.Item label="联系方式">{contacts ? contacts[0].value : "暂无数据"}</Descriptions.Item>
            <Descriptions.Item label="邮政编码">{addresses ? addresses[0].zipCode : "暂无数据"}</Descriptions.Item>
            <Descriptions.Item
              label={
                <span>
                      某某数据
                      <Tooltip title="数据说明">
                        <Icon
                          style={{color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4}}
                          type="info-circle-o"
                        />
                      </Tooltip>
                    </span>
              }
            >
              725
            </Descriptions.Item>
            <Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item>
          </Descriptions>
          <h4 style={{marginBottom: 16}}>工商信息</h4>
          <Card type="inner" title="多层级信息组">
            <Descriptions style={{marginBottom: 16}} title="工商信息">
              <Descriptions.Item
                label="注册号(Registration Number)">{registrationNumber && registrationNumber.iDNumber ? registrationNumber.iDNumber : "暂无数据"}</Descriptions.Item>
              <Descriptions.Item
                label="税号(Tax code)">{taxcode && taxcode.iDNumber ? taxcode.iDNumber : "暂无数据"}</Descriptions.Item>
              <Descriptions.Item
                label="增值税发票号(VAT code)">{vatcode && vatcode.iDNumber ? vatcode.iDNumber : "暂无数据"}</Descriptions.Item>
              <Descriptions.Item label="过期时间">2017-08-08</Descriptions.Item>
              <Descriptions.Item label="描述">
                暂无数据
              </Descriptions.Item>
            </Descriptions>
            <Divider style={{margin: '16px 0'}}/>
            <Descriptions style={{marginBottom: 16}} title="包含内容" column={1}>
              <Descriptions.Item label="说明">
                信用评分及额度、基本信息、经营活动、曾用名称、旧的企业类型、联系信息、负面信息、付款信息、
                董事/管理人员、股权结构、集团结构、关联公司、其他信息、财务信息、损益表、资产负债表、其他 财务信息、比率（由于企业类型和规模不同，报告的内容可能会有所差异）
              </Descriptions.Item>
            </Descriptions>
            <Divider style={{margin: '16px 0'}}/>
            <Descriptions title="提示">
              <Descriptions.Item
                label="报告生成时间">不同国家和地区的公司调查所需时间不同，详情请点击下方价格表。您购买的报告调取成功后将发送至您的邮箱，请留意！</Descriptions.Item>
              <Descriptions.Item><a
                onClick={() => download(PORTAL_PATH + '/api/file/download', {filename: 'attachment/报告样本.pdf'})}>报告预览</a></Descriptions.Item>
            </Descriptions>
          </Card>

          <Descriptions style={{marginTop: 30}}>
            <Descriptions.Item><span style={{fontSize: 40, marginRight: 8}}>￥{price.price}</span>
              <a
                onclick={() => download(PORTAL_PATH + '/api/file/download', {filename: 'attachment/洲博通价格表.pdf'})}>查看价格表</a>
            </Descriptions.Item>
          </Descriptions>
        </Card>

        <Form style={{marginTop: 8}}>
          <Row>
            <Col>
              <Button key="forward" type="primary" loading={this.props.loading} onClick={() => this.getForm(1)}>
                购买资信报告
              </Button>
              <Button key="forwards" type="primary" style={{ marginTop: 8, marginLeft: 8 }} onClick={() => this.getForm(2)}>
              购买资信报告+保险公司承保额度
              </Button>
              <Button
                key="cancel"
                style={{marginTop: 8, marginLeft: 8}}
                onClick={() => this.handleResetFields()}
              >
                取消
              </Button>
            </Col>
          </Row>
        </Form>
        <OutbuyForm wrappedComponentRef={inst => (this.outbuyForm = inst)}

        />
      </div>
    );
  }
},
);

function mapStateToProps(state) {
  return {
    loading: state.loading.models.foreignTraderQuery,
  };
}

  export default connect(mapStateToProps)(outbuyInfoForm);
